<template>
  <div>
    <el-tree
      ref='tree'
      :props="props"
      :load="loadNode"
      lazy
      @node-click="getChildren"
      :expand-on-click-node="false"
      node-key="id"
      show-checkbox>
    </el-tree>
    <el-button @click="actionTree('addchildren')" type="primary">添加子节点</el-button>
    <el-button @click="actionTree('add')" type="primary">添加同级节点</el-button>
    <el-button @click="actionTree('delete')" type="danger">删除</el-button>

    <!-- 新增对话框 -->
    <el-dialog
      :title="keyWord"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-input type="text" v-model="value"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveValue">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 右侧页面 -->
    <!-- <div>用储存的当前点击的node对象的属性字段来发送请求刷新页面</div> -->
  </div>
</template>
<script>
  export default {
    data() {
      return {
        props: {
          label: 'label', // 判断父节点
          children: 'children', // 判断子节点
          isLeaf: 'leaf' // 判断是否为叶子节点
        },
        dialogVisible: false, // 对话框显示布尔值
        keyWord: '', // 储存keyWord, 判断对话框操作类型
        value: '', // 对话框input绑定值
        node: undefined, // 储存当前节点的node对象
        firstData: [{ label: 'aaa', parent: 0, id: 1 }], // 第一层假数据
        secondData: [{ // 第二层假数据
            label: 'leaf',
            id: 2,
            parent: 1,
            leaf: true
          }, {
            id: 3,
            parent: 1,
            label: 'zone'
          }]
      }
    },
    created() {
    },
    methods: {
      // tree懒加载
      loadNode(node, resolve) {
        console.log(node)
        // tree第一层
        if (node.level === 0) {
          return resolve(this.firstData);
        }

        // // 大于第二层 返回空
        // if (node.level > 1) return resolve([]);

        // 动态获取node中 data 的id 发送请求 获取下一层数据
        if (node.level > 0) {
          // const id = node.data.id
          // getData(id).then(res => {
          //   if (res.success) {
          //     resolve(res.data)
          //   }
          // }).catch(err => console.log(err))
          resolve(this.secondData)
        }
      },
      // 点击节点的回调
      getChildren(data, node) {
        // 因为要新增同级节点，储存node方便获取父级的id
        this.node = node
        // 储存data对zi象， 右侧页面刷新数据的接口在此处调用
        console.log(data)
        console.log(node)
      },
      // tree节点操作
      actionTree(keyWord) {
        // 储存keyWord 方便对话框判断操作类型

        this.keyWord = keyWord
        // 调用getCurrentKey() 获取当前点击的节点 若没有返回null
        const node = this.$refs.tree.getCurrentKey()
        if (!node) {
          return this.$message.error('请选择节点！！')
        }
        if (this.keyWord === 'delete') {
          this.$confirm('确认删除此节点?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$refs.tree.remove(this.node)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        } else {
          this.dialogVisible = true
        }
      },
      // 对话框确定保存操作
      saveValue() {
        console.log(this.keyWord)
        // 新增子节点
        if (this.keyWord === 'addchildren') {
          this.secondData.push({
            id: 4,
            parent: this.node.id,
            label: this.value
          })
          // 赋值当前节点node的id
          const key = this.node.id
          console.log(key, this.secondData)
          this.$refs.tree.updateKeyChildren(key, this.secondData)
        } else if (this.keyWord === 'add') {
          // 新增同级节点
          let dataArr = []
          this.node.parent.childNodes.forEach(item => {
            dataArr.push(item.data)
          })
          dataArr.push({
            id: 9,
            parent: this.node.parent.id,
            label: this.value
          })
          const key = this.node.parent.id
          console.log(key, dataArr)
          this.$refs.tree.updateKeyChildren(key, dataArr)
        } else {
        }
        this.dialogVisible = false
      },
      // 关闭对话框
      handleClose() {
        this.value = ''
        this.dialogVisible = false
      }
    }
  };
</script>
<style scoped>

</style>